<template>
    <div class="orderlist">
        <div class="orderlist_top" v-if="obj.common" style="padding-top:15px;padding-bottom:8px">
            <yd-step theme="2" :current="currents" v-if="obj.common&&obj.common.postType == 1  && obj.common.payType != 3">
                <yd-step-item>
                    <span slot="top">提交订单</span>
                    <span slot="bottom" v-if="obj.addTimeDes">{{obj.addTimeDes}}</span>
                </yd-step-item>
                <yd-step-item v-if="obj.orderState == '0'">
                    <span slot="top">已取消</span>
                    <span slot="bottom" v-if="obj.finnshedTime">{{obj.finnshedTime | formatDate}}</span>
                </yd-step-item>
                <yd-step-item v-else>
                    <span slot="top">已配送</span>
                    <span slot="bottom" v-if="shippingTime">{{shippingTime | formatDate}}</span>
                </yd-step-item>
            </yd-step>
            <yd-step theme="2" :current="currents" v-if="obj.common&&obj.common.postType == 1  && obj.common.payType == 3">
                <yd-step-item>
                    <span slot="top">领取时间</span>
                    <span slot="bottom" v-if="obj.addTimeDes">{{obj.addTimeDes}}</span>
                </yd-step-item>
                <yd-step-item>
                    <span slot="top">已配送</span>
                    <span slot="bottom" v-if="shippingTime">{{shippingTime | formatDate}}</span>
                </yd-step-item>
            </yd-step>
            <yd-step theme="2" :current="currents" v-if="obj.common&&obj.common.postType == 2">
                <yd-step-item>
                    <span slot="top">提交订单</span>
                    <span slot="bottom" v-if="obj.addTimeDes">{{obj.addTimeDes}}</span>
                </yd-step-item>
                <yd-step-item v-if="obj.orderState == '0'">
                    <span slot="top">已取消</span>
                    <span slot="bottom" v-if="obj.finnshedTime">{{obj.finnshedTime | formatDate}}</span>
                </yd-step-item>
                <yd-step-item v-else>
                    <span slot="top">已完成</span>
                    <span slot="bottom" v-if="obj.paymentTime">{{obj.paymentTime | formatDate}}</span>
                </yd-step-item>
            </yd-step>
        </div>
        <div class="orderlist_top" v-if="obj.common && obj.common.postType == 1">
            <yd-cell-group>
                <yd-cell-item>
                    <span slot="left">订单状态：{{obj.orderState | oState}}</span>
                    <span slot="right" style="color:red" v-if="obj.common&&obj.common.postType == 1 && obj.common.payType != 3">自己买</span>
                    <!-- <span slot="right" style="color:red" v-if="obj.common&&obj.common.postType == 2 ">送朋友</span> -->
                    <span slot="right" style="color:red" v-if="obj.common&&obj.common.postType == 1 && obj.common.payType == 3 ">领取</span>
                </yd-cell-item>
                <yd-cell-item>
                    <span slot="left">订单编号：{{obj.orderSn}}</span>
                </yd-cell-item>
            </yd-cell-group>
        </div>
        <div class="orderlist_top" v-if="obj.common && obj.common.postType == 2">
            <yd-cell-group>
                <div class="goodsInfo_li" style="height:3rem">
                    <div v-if="obj.common && obj.common.postType == 2 && giftCode">
                        <div class="shop_maRight" @click="canvasClick">
                            <canvas id="qrccode-canvas" class="order_img3"></canvas>
                        </div>
                    </div>
                    <div class="goodsInfo_list">
                        <div class="goodsInfo_title">订单状态：{{obj.orderState | oState}}</div>
                        <br>
                        <br>
                        <div class="goodsInfo_title">订单编号：{{obj.orderSn}}</div>
                        <br>
                        <br>
                        <div class="goodsInfo_title">二维码状态：<span slot="right" style="color:red">{{codeStateInfo}}</span></div>
                    </div>
                </div>
            </yd-cell-group>
        </div>
        <!-- <div class="orderlist_top" v-if="obj.common && obj.common.postType == 2">
            <yd-cell-group>
                <yd-cell-item v-if='giftCode'>
                    <span slot="left" class="shop_ma">
                        <div class="shop_maLeft">商品二维码：</div>
                        <div class="shop_maRight" @click="canvasClick">
                            <canvas id="qrccode-canvas"></canvas>
                        </div>
                        <div class="shop_center">请点击二维码放大后长按发送给朋友识别</div>
                    </span>
                </yd-cell-item>
                <yd-cell-item>
                    <span slot="left">二维码状态</span>
                    <span slot="right" style="color:red">{{codeStateInfo}}</span>
                </yd-cell-item>
            </yd-cell-group>
        </div> -->
        <div class="orderlist_top" v-if="obj.common && obj.common.postType == 1">
            <yd-cell-group>
                <yd-cell-item v-if="obj.shippingCode">
                    <span slot="left">配送方式：{{obj.common.shippingExpressName}} {{obj.shippingCode}}</span>
                    <span slot="right" style="color:red">
                        <yd-badge v-clipboard:copy="shippingExpressInfo" v-clipboard:success="onCopy" v-clipboard:error="onError">复制</yd-badge>
                    </span>
                </yd-cell-item>
                <yd-cell-item v-if="obj.common.address">
                    <span slot="left" class="areaInfo">配送地址：{{obj.common.address.areaInfo}} {{obj.common.address.address}}</span>
                </yd-cell-item>
                <yd-cell-item v-if="obj.common.address">
                    <span slot="left">收货人：{{obj.common.address.trueName}} {{obj.common.address.mobPhone}}</span>
                </yd-cell-item>
            </yd-cell-group>
        </div>
        <div class="orderlist_top">
            <yd-cell-group>
                <div class="goodsInfo_li" v-for="(item,index) in goodsList" :key='index'>
                    <div class="goodsInfo_img">
                        <img :src='imgUrl+item.goodsImage'>
                    </div>
                    <div class="goodsInfo_list">
                        <div class="goodsInfo_title">{{item.goodsName}}
                            <span style="color:red;float:right;margin-right:15px">￥<yd-countup :endnum="item.goodsPrice" duration="0.1" decimals="2" separator=","></yd-countup></span>
                        </div>
                        <br>
                        <div class="goodsInfo_conter">规格：{{item.goodsSpec | oGoodsSpec}} 
                            <span style="color:red;float:right;margin-right:15px"> X {{item.goodsNum}}</span>
                        </div>
                    </div>
                </div>
            </yd-cell-group>
        </div>
        <div class="orderlist_top" v-if="obj.common && obj.common.invoiceInfo && obj.common.payType != 3">
            <yd-cell-group>
                <yd-cell-item v-if="invoiceInfo.invCompany">
                    <span slot="left">发票信息</span>
                </yd-cell-item>
                <yd-cell-item v-if="invoiceInfo.invCompany">
                    <span slot="left">&nbsp;&nbsp;名称：{{invoiceInfo.invCompany}}</span>
                    <span slot="right" style="color:red">随商品一起送</span>
                </yd-cell-item>
                <yd-cell-item v-if="invoiceInfo.invCode">
                    <span slot="left">&nbsp;&nbsp;纳税识别号：{{invoiceInfo.invCode}}</span>
                </yd-cell-item>
            </yd-cell-group>
        </div>
        <div class="orderlist_top" v-if="obj.common">
            <yd-cell-group>
                <yd-cell-item>
                    <span slot="left">商品总额</span>
                    <span slot="right" style="font-size:14px;color:red">{{obj.goodsAmount}}元</span>
                </yd-cell-item>
                <yd-cell-item>
                    <span slot="left">运费</span>
                    <span slot="right" style="font-size:14px;color:red">{{obj.shippingFee}}元</span>
                </yd-cell-item>
                <yd-cell-item>
                    <span slot="right" v-if="obj.orderState>10" style="font-size:18px;color:red">实付金额：{{obj.orderAmount}}元</span>
                    <span slot="right" v-else style="font-size:18px;color:red">实付金额：0元</span>
                </yd-cell-item>
            </yd-cell-group>
        </div>
        <div class="code_box" v-show="canvasBox" @click="closeBox">            
            <yd-list theme="5" slot="list">
                 <yd-list-item>
                    <span slot="title" style="text-align:center;display:block;">关爱礼盒</span>
                 </yd-list-item>
            </yd-list>
            <yd-list theme="3" slot="list" v-if="goodsList.length < 5">
                 <yd-list-item v-for="(item, key) in goodsList" :key="key">
                    <img slot="img" :src="imgUrl+item.goodsImage" style="width:50px;height:50px;clear:both;display:block;margin:auto;">
                    <span slot="title" style="text-align:center;display:block;">{{item.goodsName}}</span>
                 </yd-list-item>
            </yd-list>
            <yd-cell-group v-else> 
                <div style="text-align:center;">  
                    <div style="overflow:hidden; display:inline-block;">  
                        <div>
                            <img slot="img" src="../../assets/giftBox.png" style="width:100px;height:100px;display:block;margin:auto;">
                        </div>
                    </div>  
                </div>
                <div style="margin-top:20px">
                    <span slot="title" style="width:360px;text-align:center;display:block;margin:auto;">{{giftGoodsName}}</span>
                </div>
            </yd-cell-group>
            <div class="code_img1" v-if="goodsList.length < 3">
                <img @click.stop="closeImg" :src="imgURL1" alt="" crossorigin="anonymous">
            </div>
            <div class="code_img" v-else>
                <img @click.stop="closeImg" :src="imgURL2" alt="" crossorigin="anonymous">
            </div>
        </div>
        <yd-flexbox class="order_bottom_btn" v-if="obj.orderState == '10'">
            <yd-flexbox-item class="order_bottom_right">
                <yd-button type="hollow" @click.native="purchaseBtn(obj)" style="margin-right:0.1rem">去支付</yd-button>
                <yd-button type="danger" @click.native="tuiBtn(obj)" style="margin-right:0.1rem">取消订单</yd-button>
            </yd-flexbox-item>
        </yd-flexbox>
    </div>
</template>
<script>
import moment from 'moment'
import QRCode from 'qrcode'
var canvas = '';
export default {
    name: 'orderlist',
    data() {
        return {
            imgURL1: '',
            imgURL2: '',
            canvasBox: false,
            codeStateInfo: '',
            imgUrl: this.CONSTANT.imgBaseUrl,
            currents: 1,
            orderId: '',
            obj: {},
            goodsList: [],
            shippingTime: null,
            bannerUrl: this.CONSTANT.weChatBaseUrl + '#/fastLogin',  // 领取礼品时，跳转验证码登录
            invoiceInfo: {},
            giftCode: '',
            pageFlg: '',
            giftGoodsName: '',
            shippingExpressInfo: ''
        }
    },
    filters: {
        oState(item) {
            //订单状态：-1:所有订单;0:已取消;10默认:未付款;20:已付款;30:已发货;40:已完成;50:待评价;75:已结算;
            let stateText = '';
            if (item == 0) {
                return "已取消";
            } else if (item == 10) {
                return "未付款";
            } else if (item == 20) {
                return "待发货";
            } else if (item == 30) {
                return "已发货";
            } else if (item == 40) {
                return "已完成";
            } else if (item == 75) {
                return "已完成";
            }
        },
        formatDate(date) {
            if (date == undefined || date == '') {
                return "无";
            }
            return moment(date * 1000).format("YYYY-MM-DD HH:mm:ss");
        },
        oGoodsSpec(goodsSpec) {
            if (goodsSpec == 'N;') {
                return "默认";
            }
            return goodsSpec;
        }
    },
    created() {
        // 页面加载前的等待时间（支付页面的支付处理需要一定的时间）
        let waitTime = 1;
        // 该页面的迁移源有：paymoney、order页面                
        // order页面的迁移源有：paymoney、me、receiveGifts、orderlist页面
        this.pageFlg = this.$route.query.pageFlg || '';
        // paymoney页面送朋友时，pageFlg没有设定
        if (this.pageFlg == undefined || this.pageFlg == '') {
            this.pageFlg = "paymoney";
            waitTime = 2500;
        }
        this.orderId = this.$route.query.orderId;
        //this.init();
        this.$dialog.loading.open('请稍后');
        setTimeout(() => {
                            this.init();
                          }, waitTime);
    },
    mounted: function() {
        // 企业微信支付处理的返回需要
        this.pushHistory();
        let float = false;
        setTimeout(() => {float = true;}, 200);
        window.addEventListener("popstate", (e) => {
                if(float)  {
                    float = false;
                    // 送朋友时、paymoney页面直接跳转,不可返回到paymoney页面
                    if (this.pageFlg == 'paymoney') {
                        this.$router.push('/');
                    } else if (this.pageFlg == 'paymoney_order') {
                        this.$router.push('/order?pageFlg=paymoney');
                    } else {
                        // me、receiveGifts页面跳转时、设置为各自的页面
                        this.$router.push('/order?pageFlg='+this.pageFlg);
                    }
                }
                this.pushHistory();
            }, false);
    },
    methods: {
        canvasClick() {
            if (this.codeStateInfo != '未生成') {
                this.canvasBox = true;
                this.$nextTick(function() {
                    let bannerUrl = this.bannerUrl + '?giftCode=' + this.giftCode;
                    let canvas = document.getElementById('qrccode-canvas');
                    if (this.goodsList.length < 3) {
                        this.imgURL1 = canvas.toDataURL("image/png");  
                    } else {
                        this.imgURL2 = canvas.toDataURL("image/png");
                    }                     
                })
            }
        },
        closeBox() {
            this.canvasBox = false;
        },
        closeImg() {
            this.canvasBox = true;
        },
        onCopy: function (e) {
            this.$dialog.toast({
                mes: "复制成功",
                timeout: 600
            });
        },
        onError: function (e) {
            this.$dialog.toast({
                mes: "复制失败",
                timeout: 600
            });
        },
        init() {
            //this.$dialog.loading.open('请稍后');
            this.$axios.get(this.CONSTANT.wapiBaseUrl + 'order/info?orderId=' + this.orderId)
                .then((response) => {
                    this.$dialog.loading.close();
                    if (response.status == 200) {
                        if (response.data.status == 1) {
                            this.obj = response.data.object;
                            this.goodsList = response.data.object.goods;
                            if (response.data.object.common.postType == 1) {
                                if (response.data.object.common.shippingTime) {
                                    this.currents = 2;
                                    this.shippingTime = response.data.object.common.shippingTime || 0;
                                }
                                if (response.data.object.finnshedTime && response.data.object.orderState == '0') {
                                    this.currents = 2;
                                }
                                
                                // 一次购买的是不同店铺的商品时,商品list的返回值为orderGoodsList
                                if (response.data.object.orderGoodsList != null && response.data.object.orderGoodsList.length > 1) {
                                    this.goodsList = response.data.object.orderGoodsList;
                                }
                            }

                            if (response.data.object.common.postType == 2) {
                                this.postTypes(response.data.object.orderBatchNumber)
                                if(response.data.object.paymentTime){
                                    this.currents = 2;
                                }
                                if(response.data.object.finnshedTime && response.data.object.orderState == '0'){
                                    this.currents = 2;
                                }
                                // 送礼订单，并且一次购买的是不同店铺的商品时,商品list的返回值为orderGoodsList
                                if (response.data.object.orderGoodsList != null && response.data.object.orderGoodsList.length > 1) {
                                    this.goodsList = response.data.object.orderGoodsList;
                                }
                                // 送礼的礼品名称的文字多余150时,最后两个字以......代替
                                for (var i = 0; i <this.goodsList.length; i++) {
                                    if (i==0) {
                                        this.giftGoodsName = this.goodsList[i].goodsName;
                                    } else {
                                        this.giftGoodsName = this.giftGoodsName + "、" + this.goodsList[i].goodsName;
                                    }
                                }
                                // this.giftGoodsName = this.giftGoodsName + "送礼的礼品名称的文字多余送礼的礼品名称的文字多余送礼的礼品名称的文字多余送礼的礼品名称的文字多余送礼的礼品名称的文字多余送礼的礼品名称的文字多余送礼的礼品名称的文字多余送礼的礼品名称的文字多余送礼的礼品名称的文字多余送礼的礼品名称的文字多余送礼的礼品名称的文字多余送礼的礼品名称的文字多余";
                                let allLength = this.giftGoodsName.length + 2;  // 前后两个括号 
                                if (allLength > 150) {
                                    // 省略号占两个字符
                                    this.giftGoodsName = this.giftGoodsName.substr(0, 146) + "......";
                                }
                                this.giftGoodsName = "(" + this.giftGoodsName + ")";
                            }
                            // 配送方式(复制用)
                            if (response.data.object.shippingCode) {
                                this.shippingExpressInfo = response.data.object.common.shippingExpressName + "  " + response.data.object.shippingCode;
                            }
                            // 发票信息
                            if (response.data.object.common.invoiceInfo) {
                                this.invoiceInfo = JSON.parse(response.data.object.common.invoiceInfo);
                            }
                        } else {
                            this.$dialog.toast({
                                mes: response.data.msg,
                                timeout: 600
                            });
                        }
                    }
                }).catch((error) => {
                    this.$dialog.loading.close();
                });
        },
        postTypes(orderBatchNumber) {
            this.$axios.get(this.CONSTANT.wapiBaseUrl + 'gift/list?orderBatchNumber=' + orderBatchNumber)
                .then((response) => {
                    this.$dialog.loading.close();
                    if (response.status == 200) {
                        if (response.data.status == 1) {
                            if (response.data.object.length > 0) {
                                this.giftCode = response.data.object[0].giftCode;
                                this.codeStateInfo = response.data.object[0].codeStateInfo;
                                this.$nextTick(function() {
                                    // DOM操作
                                    let bannerUrl = this.bannerUrl + '?giftCode=' + response.data.object[0].giftCode;
                                    canvas = document.getElementById('qrccode-canvas');
                                    QRCode.toCanvas(canvas, bannerUrl, (error) => {
                                        if (error) {
                                            console.log(error)
                                        } else {
                                            console.log('success')
                                        }
                                    })
                                })
                            } else {
                                this.codeStateInfo = '未生成';
                            }
                        } else {
                            this.$dialog.toast({
                                mes: response.data.msg,
                                timeout: 600
                            });
                        }
                    }
                }).catch((error) => {
                    this.$dialog.loading.close();
                });
        },
        //支付
        purchaseBtn(item) {
            // item.orderSn:19位的OrderSn
            // item.orderBatchNumber:8位的OrderBatchNumber
            // item.orderId:四位的OrderId
            let param = 'orderSn=' + item.orderSn + '&orderId=' + item.orderBatchNumber + '&orderlist=' + item.orderId + '&buyType=' + item.common.postType + '&orderAmount=' + item.orderAmount;
            let href = '/pay/paymoney?' + param + '&pageFlg=orderlist';
            this.$router.push(href);
        },
        //取消订单
        tuiBtn(item) {
            this.$dialog.confirm({
                title: '提示',
                mes: '确定取消订单?',
                opts: () => {
                    this.$dialog.loading.open('请稍后');
                    this.$axios.get(this.CONSTANT.wapiBaseUrl + 'order/cancel?orderId=' + item.orderId)
                        .then((response) => {
                            this.$dialog.loading.close();
                            if (response.data.status == 1) {
                                this.$dialog.toast({ mes: '已取消订单', timeout: 600 });
                            } else {
                                this.$dialog.toast({ mes: response.data.msg, timeout: 600 });
                            }
                            this.init();
                        }).catch((error) => {
                            this.$dialog.loading.close();
                        });
                }
            });
        },
        pushHistory() {
            let state = {title: "orderlist", url: "#"};
            window.history.pushState(state, "订单详情", "#");
        }
    }
}
</script>
<style  scoped>
.orderlist {
    width: 100%;
    height: auto;
    overflow: hidden;
}

.code_box {
    position: fixed;
    left: 0;
    width: 100%;
    height: 100%;
    top: 0;
    background: rgba(0, 0, 0, 0.8);
    z-index: 99;
}

.code_img {
    width: 6rem;
    height: 6rem;
    margin: auto auto;
    position: absolute;
    padding: 8px;
    left: 0;
    right: 0;
    top: 4rem;
    bottom: 0;
}

.code_img img {
    display: block;
    width: 95%;
    height: 95%;
}

.code_img1 {
    width: 6rem;
    height: 6rem;
    margin: auto auto;
    position: absolute;
    padding: 8px;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
}

.code_img1 img {
    display: block;
    width: 100%;
    height: 100%;
}

.shop_ma {
    width: 100%;
    height: auto;
    min-height: 148px;
    overflow: hidden;
}

.shop_maLeft {
    float: left;
    line-height: 50px;
}

.shop_maRight {
    margin-bottom: 20px;
    float: left;
}

.shop_center {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    font-size: 12px;
    color: red;
    line-height: 30px;
    margin-bottom: 5px;
    text-align: center;
}

.btn-wrap {
    width: 260px;
    height: 260px;
    margin: 0 auto;
}

.orderlist_top {
    width: 100%;
    background: #fff;
    height: auto;
    margin-bottom: 5px;
}

.order_img3 {
    position: absolute;
    right: 0.1rem;
    top: 0.1rem;
    bottom: 0.1rem;
    height: 2.5rem !important;
    width: 2rem !important;
}

.goodsInfo_li {
    width: 100%;
    /* height: 2rem; */
    padding-top: 5px;
    padding-bottom: 5px;
    overflow: hidden;
    border-bottom: 1px solid #BBBBBB;
}

.goodsInfo_li:last-of-type {
    border-bottom: 0;
}

.goodsInfo_li .goodsInfo_img {
    float: left;
    padding-left: 0.2rem;
    width: 1.8rem;
    height: 100%;
    overflow: hidden;
}

.goodsInfo_img img {
    width: 100%;
    height: auto;
    min-height: 100%;
}

.goodsInfo_list {
    /* float: left; */
    /* width: calc(100% - 2.5rem); */
    padding-left: 0.2rem;
    height: 100%;
    box-sizing: border-box;
    padding-top: 0.3rem;
    overflow: hidden;
    text-overflow: ellipsis;
}

.goodsInfo_list .goodsInfo_title {
    color: #333;
    font-size: 16px;
    overflow: hidden;
    height: 0.4rem;
    line-height: 0.4rem;
}

.goodsInfo_list .goodsInfo_conter {
    color: #4E4B4A;
    height: 0.5rem;
    font-size: 14px;
    overflow: hidden;
    white-space: nowrap;
    line-height: 0.5rem;
}

.order_bottom_btn {
    padding: 0.2rem 0.1rem;
    text-align: right;
}

.order_bottom_right {
    color: #E30313;
}
</style>
<style>
.orderlist .orderlist_top .yd-cell-box {
    margin-bottom: 0px!important;
}

.orderlist .areaInfo {
    white-space: pre-line;
    padding: 15px 0;
}
</style>